{{extend  '../layout.html'}}

{{block 'head'}}
<style>
    #canvas {
        width: 11rem;
        height: 11rem;
        background: #fdfdfd;
        margin: auto;
        box-sizing: border-box;

    }

    #canvas .box-item {
        line-height: 55px;
        text-align: center;
        font-size: 30px;
        width: 33%;
        height: 33%;
        float: left;
        border-top: 3px solid #000;
        border-left: 3px solid #000;
    }

    #canvas .box-item:nth-child(3),
    #canvas .box-item:nth-child(6),
    #canvas .box-item:nth-child(9) {
        border-right: 3px solid #000;
    }

    #canvas .box-item:nth-child(7),
    #canvas .box-item:nth-child(8),
    #canvas .box-item:nth-child(9) {
        border-bottom: 3px solid #000;
    }


a{
    color:#00B7FF;
}
#content{
    width: 800px;
    margin-left:auto;
    margin-right: auto;
    padding: 5px;


}
 
</style>
{{/block}}
{{block  "content"}}

<!-- 内容明细卡 -->
<div class="row">
    <div class="col">

        <div class="card mb-3" style="background: #f5f5d5;color: #111111;">
            <!-- <img class="card-img-top" src="/images/lar.jpg" style="height:200px" alt="Card image cap"> -->
            <div class="card-body">
                <h5 class="card-title" style="text-align:center">#字棋{{title}}</h5>
                <p class="card-text"> </p>
                <p class="card-text">
                    <small class="text-muted">作者：admin{{user}}</small>
                    <small class="text-muted"> </small>
                    <small class="text-muted">时间：2019.7.13{{time}}</small>
                </p>
                
                <div class="content">
                    <p>基于对游戏和智能机器的兴趣，开发了这个简单的#字棋人机对战小游戏 后续会优化智能等级本并且开发吃网络对战功能 </p>
                        <div class="alert alert-danger" role="alert" id="commonShowMsg" style="display:none;text-align: center">
                          
                            </div>
                    <div class="alert alert-danger" role="alert" id="errMsg" style="display:none;text-align: center">
                       
                    </div>
                    <div class="alert alert-success" role="alert">
                        <h4 class="alert-heading">请棋手<span id="chessPlayerName"></span>下棋:</h4>
                        <div class="container">
                            <div class="row">
                                <div class="col-sm">
                                    <div id="canvas">
                                        <div class="box-item" index="1"></div>
                                        <div class="box-item" index="2"></div>
                                        <div class="box-item" index="3"></div>
                                        <div class="box-item" index="4"></div>
                                        <div class="box-item" index="5"></div>
                                        <div class="box-item" index="6"></div>
                                        <div class="box-item" index="7"></div>
                                        <div class="box-item" index="8"></div>
                                        <div class="box-item" index="9"></div>
                                    </div>
                                </div>
                                <div class="col-sm">
                                    <button type="button" class="btn btn-outline-danger" id="reset">重新开始</button>
                                    <div id="canvas-list" style="height:200px;overflow:auto;display: none">

                                    </div>
                                </div>

                            </div>




                        </div>
                    </div>
                </div>

            </div>
        </div>

     
        <!-- 评论 -->
        {{include '../template/footer.html'}}

    </div>

</div>

{{/block}}

{{block 'js_script'}}

 
<script>
    require(['jquery', 'bootstrap', 'index'], function ($, strap) {
       
        //  对角其
        var count = 0;
        var ischeck=false;
        var chessPlayer;
        var chessPlayerName;
        var history = [];

        function chessPlayerFN() {
            chessPlayer = !chessPlayer;
            chessPlayerName = chessPlayer ? 'X' : 'O';
            $("#chessPlayerName").text(chessPlayerName);
        }
        chessPlayerFN()
        function historyFn() {
            var arr = [];
            var html = '';
            $('.box-item').each(function (ind, val) {
                var text = $(val).text().trim();
                if (text) {
                    arr.push(text);
                } else {
                    arr.push('');
                }
            })
            history.push(arr);
            history.forEach(function (val, ind) {
                html+='<button type="button" class="btn btn-warning historyClick" style="margin-top:1px">第' + (ind + 1) + '步</button> </br>';
                // html += '<button class="historyClick">第' + (ind + 1) + '步</button>'
            })
            $('#canvas-list').html(html);
        }
        function successFn(atArray) {
            var sucArray = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6],
            ];

            for (var i = 0; i < sucArray.length; i++) {
                var a = sucArray[i][0];
                var b = sucArray[i][1];
                var c = sucArray[i][2];
                if (atArray[a] && atArray[a] == atArray[b] && atArray[a] == atArray[c]) {
                    $('.box-item').off();
                    $('#errMsg').text('棋手'+atArray[a] + '胜利  请点击重新开始').show();
                    return false;
                }
            }
        }
        $('#reset').on('click',function(){
            count=0
            //重新开始
            chessPlayer=false;   
            chessPlayerFN()
            history=[];
            $('.box-item').off().text('');
            $('#errMsg').hide()
            init() 
            smart() 
        })
        $('body').on('click', '.historyClick', function () {
          // 后退功能
        })
        function smart(){
            ischeck=true;
             var atarr = $('.box-item').map(function(ind,val){
                 return $(val).text().trim() || '';
             })
             count++;

             console.log(count,'count')
            //  atarr.each(function(ind,val){
                 //第一步
                  
                 var sucArray = [
                [0, 1, 2],
                [3, 4, 5],
                [6, 7, 8],
                [0, 3, 6],
                [1, 4, 7],
                [2, 5, 8],
                [0, 4, 8],
                [2, 4, 6],
            ];

            for (var i = 0; i < sucArray.length; i++) {
                var a = sucArray[i][0];
                var b = sucArray[i][1];
                var c = sucArray[i][2];
                if (atarr[a] == 'X'&&atarr[b] == 'X'&&atarr[c]=='') {
                    $('.box-item')[c].click();
                    return false;
                }else if (atarr[a] == 'X'&&atarr[c] == 'X'&&atarr[c]=='') {
                    $('.box-item')[b].click();
                    return false;
                }else if (atarr[b] == 'X'&&atarr[c] == 'X'&&atarr[c]=='') {
                    $('.box-item')[a].click();
                    return false;
                }
            }
                 if(count === 1 && !atarr[4]){
                    $('.box-item')[4].click();

                 } else   if(count === 2){
                    if( !atarr[0]){
                        $('.box-item')[0].click();
                    }else  if( !atarr[2]){
                        $('.box-item')[2].click();
                    }else if( !atarr[6]){
                        $('.box-item')[6].click();
                    }else if( !atarr[8]){
                        $('.box-item')[8].click();
                    }
                 }else if(count === 3  ){
                     console.log(atarr)
                     if( atarr[0]=='x'&&!atarr[2]){
                        $('.box-item')[2].click();
                    }else  if(  atarr[0]=='x'&&!atarr[6]){
                        $('.box-item')[6].click();
                    }else  if(  atarr[2]=='x'&&!atarr[0]){
                        $('.box-item')[0].click();
                    }else if(  atarr[2]=='x'&&!atarr[8]){
                        $('.box-item')[8].click();
                    } else if(  atarr[6]=='x'&&!atarr[0]){
                        $('.box-item')[0].click();
                    }else if(  atarr[6]=='x'&&!atarr[8]){
                        $('.box-item')[0].click();
                    }else if(  atarr[8]=='x'&&!atarr[2]){
                        $('.box-item')[2].click();
                    }else if(  atarr[8]=='x'&&!atarr[6]){
                        $('.box-item')[6].click();
                    }else{
                        for(var i = 0 ; i<atarr.length;i++){
                           if(!atarr[i]){
                               $('.box-item')[i].click();
                               break;
                           }
                        }
                    }
                    
                 }else if(count === 4 ){  
                        if( atarr[0]=='x'&& atarr[2]=='x'&&!atarr[1]){
                        $('.box-item')[1].click();
                    }else  if(  atarr[2]=='x'&&atarr[8]=='x'&&!atarr[5]){
                        $('.box-item')[5].click();
                    }else if(  atarr[0]=='x'&&atarr[6]=='x'&&!atarr[3]){
                        $('.box-item')[3].click();
                    }else if(  atarr[6]=='x'&&atarr[8]=='x'&&!atarr[7]){
                        $('.box-item')[7].click();
                    } else{
                        for(var i = 0 ; i<atarr.length;i++){
                           if(!atarr[i]){
                               $('.box-item')[i].click();
                               return false;
                           }
                        }
                    }
                 }else  if(count === 5 ){
                        for(var i = 0 ; i<atarr.length;i++){
                           if(!atarr[i]){
                               $('.box-item')[i].click();
                               return false;
                             
                           }
                        }
                 }else if(count === 6 ){
                        for(var i = 0 ; i<atarr.length;i++){
                           if(!atarr[i]){
                               $('.box-item')[i].click();
                               return false;
                                
                           }
                        }
                 };


            //  })
        }
        function init() {
            $('.box-item').on('click', function () {
                if ($(this).text().trim()) {
                    return false;
                }

                $(this).text(chessPlayerName);
                var atArray = $('.box-item').map(function (ind, val) {
                    return $(val).text().trim() || '';
                })

                historyFn()
                chessPlayerFN();

                successFn(atArray)
                if(ischeck){
                    ischeck=false;
                    return false;
                }
                setTimeout(function(){
                
                   smart();
                },500)
            })
        }
        init() 
        smart()
    })
</script>
{{/block}}